<template>
  <div class="CoreData">
    <div class="CoreData_boxtop">
      <div class="CoreData_top">
        <div class="CoreData_top_box">
          <router-link to="/">
            <img
              class="CoreData_top_logo"
              src="https://huizeimg.oss-cn-shenzhen.aliyuncs.com/huize/update/156222927235720190704163413.jpg"
              alt
            />
          </router-link>

          <div class="CoreData_top_content">核心数据</div>
        </div>
      </div>
    </div>
    <div class="CareerPlan_bottom">
      <div class="CareerPlan_boxbottom">
        <div class="CareerPlan_bottom_option">
          <router-link to="/">
            <span>首页</span>
          </router-link>
          <span>></span>
          <span>核心数据</span>
        </div>
        <div class="CoreData_line_box">
          <div class="CoreData_top1">
            <img
              class="CoreData_img"
              src="https://huizeimg.oss-cn-shenzhen.aliyuncs.com/huize/update/156222927235720190704163413.jpg"
              alt
            />
            <div class="CoreData_content">
              <div class="line1">
                <div class="yifenyiduan">一分一段</div>
                <div class="year">
                  <el-select v-model="value" v-on:change="selectscore" placeholder="2019年">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </div>
              </div>
              <div class="line2">
                <span class="line2_fenzhi">分值</span>
                <span class="line2_thispeople">本段人数</span>
                <span class="line2_people">累计人数</span>
              </div>
              <div class="line3">
                <span class="line3_fenzhi">{{ScoreChina.score}}</span>
                <span class="line3_thispeople">{{ScoreChina.cumulativeNum}}</span>
                <span class="line3_people">{{ScoreChina.scoreNum}}</span>
              </div>
            </div>
          </div>
          <div class="CoreData_top2">
            <img
              class="CoreData_img"
              src="https://huizeimg.oss-cn-shenzhen.aliyuncs.com/huize/update/156222927235720190704163413.jpg"
              alt
            />
            <div class="CoreData_content">
              <div class="line1">
                <div class="yifenyiduan">分数线</div>
                <div class="year">
                  <el-select v-model="value1" v-on:change="selectline" placeholder="2019年">
                    <el-option
                      v-for="item in options1"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </div>
              </div>

              <div class="line2_box">
                <span
                  class="line2"
                  v-for="(item,index) of ScoreLine"
                  :key="index"
                >{{item.batchName}}</span>
              </div>
              <div class="line3_box">
                <span class="line3" v-for="(item,index) of ScoreLine" :key="index">{{item.score}}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="Dropline_box">
          <span @click="change(1)" :class="show==2?'Dropline':'Dropline1'">投档线</span>
          <!-- <span  @click="change(2)"  :class="show==2?'Scoreline':'Scoreline1'">录取线</span> -->
          <div class="year_box">
            <div class="year">
              <el-select v-model="value2" v-on:change="selectDrop" placeholder="2019年">
                <el-option
                  v-for="item in options2"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>
            <div class="lowdrop">投档最低分位次</div>
          </div>
        </div>
        <div class="schoolbox" v-if="show==1">
          <div v-for="(item,index) of deliveryline" :key="index">
            <div class="school_line">
              <div class="line_one">
                <img class="school_logo" :src="item.universityEntity.logoUrl" alt />
                <div class="school_name">{{item.yuanxiaomingcheng}}</div>
              </div>
              <div class="low_box">
                <div class="lowscore">
                  {{item.year}}录取投档最低分
                  <span class="lowscore_1">{{item.deliveryScore}}</span>
                </div>
                <div class="lowrank">
                  投档最低位次
                  <span class="lowscore_1">{{item.minRanking}}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- <div class="schoolbox" v-if="show==2">
        <div class="school_line">
                    <div class="line_one">
                        <img class="school_logo" src="https://storage-oss.ipin.com/school-icon/52ac2e99747aec013fcf4ec0.jpg" alt="">
                        <div class="school_name">北京大学11111</div>
                        <span class="school_city">北京市</span>
                    </div>
                    <div class="low_box">
                        <div class="lowscore">18年录取最低分 <span class="lowscore_1">544</span></div>
                        <div class="lowrank">18年录取最低排名 <span class="lowscore_1">567777</span></div>
                        </div>
        </div>
        </div>-->
        <span class="lookmore" @click="page">查看更多</span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "CoreData",
  data() {
    return {
      pageSizes: 0,
      pageNows: 0,
      ScoreChina: [], //一分一段盒子
      ScoreLine: [], //分数线盒子
      deliveryline: [], //投档线盒子
      activeName: "second",
      show: 1,
      mostnewyear: 2019,
      options: [
        {
          value: "2019",
          label: "2019年"
        },
        {
          value: "2018",
          label: "2018年"
        },
        {
          value: "2017",
          label: "2017年"
        },
        {
          value: "2016",
          label: "2016年"
        },
        {
          value: "2015",
          label: "2015年"
        }
      ],
      value: "",
      options1: [
        {
          value: "2019",
          label: "2019年"
        },
        {
          value: "2018",
          label: "2018年"
        },
        {
          value: "2017",
          label: "2017年"
        },
        {
          value: "2016",
          label: "2016年"
        },
        {
          value: "2015",
          label: "2015年"
        },
        {
          value: "2014",
          label: "2014年"
        }
      ],
      value1: "",
      options2: [
        {
          value: "2019",
          label: "2019年"
        }
      ],
      value2: ""
    };
  },
  beforeCreate() {
    this.$nextTick(() => {
      this.getList();
      this.getline();
      this.getdelivery();
    });
  },
  Create() {
    console.log(this.value);
  },
  methods: {
    selectscore() {
      //选择分数的年份，第一个下拉框，获取年份的值，然后传到后台。一分一段
      // 　　console.log(this.value);//在这里可以正确输出每个下拉框对应的下标值，当然输出值都是可以的
      this.$ajax({
        methods: "GET",
        url: "/api/dateCore/getScoreChina",
        data: {
          year: this.value
        },

        success: res => {
          if (res.data.code == 0) {
            this.ScoreChina = res.data.data;

            console.log(this.value);
          }
        }
      });
    },
    selectline() {
      //选择分数的年份，第二个下拉框，获取年份的值，然后传到后台。分数线
      this.$ajax({
        methods: "GET",
        url: "/api/dateCore/getScoreLine",
        data: {
          year: this.value1
        },

        success: res => {
          if (res.data.code == 0) {
            this.ScoreLine = res.data.data;
            console.log(this.value);
            console.log(res.data);
          }
        }
      });
    },
    selectDrop() {
      let pageNows = this.pageNows;
      this.$ajax({
        method: "post",
        url: "/api/dateCore/getDeliveryLine/listAllDelivery",
        data: {
          pageNow: 0,
          pageSize: 3 + pageNows,
          year: this.value2
        },

        success: res => {
          if (res.data.code == 0) {
            this.deliveryline = res.data.data.list;
            console.log(this.value);
          } else {
          }
        }
      });
    },
    getList() {
      //页面一进来调用接口，获得mostnewyear也就是2019年的一分一段数据，放在首页。
      this.$ajax({
        methods: "GET",
        url: "/api/dateCore/getScoreChina",
        data: {
          year: this.mostnewyear
        },

        success: res => {
          if (res.data.code == 0) {
            this.ScoreChina = res.data.data;
            console.log(this.value);
          }
        }
      });
    },

    getline() {
      //页面一进来调用接口，获得mostnewyear也就是2019年的分数线数据，放在首页。
      this.$ajax({
        methods: "GET",
        url: "/api/dateCore/getScoreLine",
        data: {
          year: this.mostnewyear
        },

        success: res => {
          if (res.data.code == 0) {
            this.ScoreLine = res.data.data;
            console.log(this.value);
            console.log(res.data);
          }
        }
      });
    },
    getdelivery() {
      //页面一进来调用接口，获得mostnewyear也就是2019年的投档线数据，放在首页。
      let pageNows = this.pageNows;
      this.$ajax({
        method: "post",
        url: "/api/dateCore/getDeliveryLine/listAllDelivery",
        data: {
          pageNow: 0,
          pageSize: 3 + pageNows,
          year: this.mostnewyear
        },

        success: res => {
          if (res.data.code == 0) {
            this.deliveryline = res.data.data.list;
            console.log(1111);
          } else {
          }
        }
      });
    },
    page() {
      this.pageNows += 8;
      let pageNows = this.pageNows;

      this.$ajax({
        method: "post",
        url: "/api/dateCore/getDeliveryLine/listAllDelivery",
        data: {
          pageNow: 0,
          pageSize: 3 + pageNows,
          year: this.mostnewyear
        },

        success: res => {
          if (res.data.code == 0) {
            this.deliveryline = res.data.data.list;
          }
        }
      });
    },

    change(e) {
      console.log(e);
      if (e == "1") {
        this.show = 1;
      } else {
        this.show = 2;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.CoreData {
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
.CoreData_boxtop {
  width: 1200px;
  margin: 0 auto;
  height: 68.6px;
}
.CoreData_top {
  height: 68.6px;
}
.CoreData_top_box {
  width: 170.6px;
  height: 68.6px;
}
.CoreData_top_logo {
  width: 50px;
  padding-top: 12.5px;
  margin-right: 24px;
}
.CoreData_top_content {
  display: inline;
  font-size: 22px;
  color: #515151;
  float: right;
  line-height: 68.6px;
}
.CareerPlan_bottom {
  width: 100%;
  background-color: #f6f6f6;
}
.CareerPlan_boxbottom {
  width: 1200px;
  margin: 0 auto;
}
.CareerPlan_bottom_option {
  padding-top: 27px;
  padding-bottom: 20px;
  span {
    color: #757575;
    font-size: 15px;
  }
}

.router-link-active {
  text-decoration: none;
}
.CoreData_line_box {
  height: 204px;
  width: 1200px;
  padding-bottom: 44px;
  display: -webkit-flex; /* Safari */
  -webkit-flex-wrap: wrap; /* Safari 6.1+ */
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.CoreData_top1 {
  width: 521px;
  height: 204px;
  background-color: #ffffff;
  float: left;
  border-radius: 10px;
  .CoreData_img {
    float: left;
    width: 150px;
    height: 150px;
    margin-top: 30px;
    margin-left: 20px;
  }
  .CoreData_content {
    float: right;
    width: 300px;
    height: 120px;
    margin-right: 33px;
    margin-top: 36px;
    .line1 {
      height: 40px;
      margin-bottom: 27px;
      .yifenyiduan {
        float: left;
        font-size: 20px;
        line-height: 40px;
        font-weight: 550;
        color: #555555;
      }
      .year {
        width: 150px;
        height: 40px;
        float: right;
        line-height: 40px;
        color: #555555;
      }
    }
    .line2 {
      width: 400px;
      margin-bottom: 24px;
      .line2_fenzhi {
        font-size: 14px;
        color: #8d8d8d;
        margin-right: 56px;
      }
      .line2_thispeople {
        font-size: 14px;
        color: #8d8d8d;
        margin-right: 56px;
      }
      .line2_people {
        font-size: 14px;
        color: #8d8d8d;
        margin-right: 51px;
      }
    }
    .line3 {
      position: relative;
      .line3_fenzhi {
        font-size: 14px;
        color: #2e86ff;
      }
      .line3_thispeople {
        font-size: 14px;
        color: #2e86ff;
        position: absolute;
        left: 209px;
      }
      .line3_people {
        font-size: 14px;
        color: #2e86ff;
        position: absolute;
        left: 89px;
      }
    }
  }
}
.CoreData_top2 {
  width: 521px;
  height: 204px;
  background-color: #ffffff;
  float: left;
  border-radius: 10px;
  .CoreData_img {
    float: left;
    width: 150px;
    height: 150px;
    margin-top: 30px;
    margin-left: 20px;
  }
  .CoreData_content {
    float: right;
    width: 300px;
    height: 120px;
    margin-right: 33px;
    margin-top: 36px;
    .line1 {
      height: 40px;
      margin-bottom: 27px;
      .yifenyiduan {
        float: left;
        font-size: 20px;
        line-height: 40px;
        font-weight: 550;
        color: #555555;
      }
      .year {
        width: 150px;
        height: 40px;
        float: right;
        line-height: 40px;
        color: #555555;
      }
    }
    .line2_box {
      width: 364px;
      margin-bottom: 24px;
      .line2 {
        // display: flex;
        //  flex-wrap: wrap;
        //   justify-content: space-between;
        margin-right: 8px;
        font-size: 13px;
        color: #8d8d8d;
      }
    }
    .line3_box {
      width: 400px;
      .line3 {
        width: 400px;
        font-size: 14px;
        margin-left: 3px;
        color: #2e86ff;
        margin-right: 35px;
      }
    }
  }
}
// .CoreData_top2{
//     width:521px;
//     height:204px;
//     background-color: #ffffff;
//     float: right;
//     border-radius: 10px;
// }
.Dropline_box {
  height: 73px;
  background-color: #ffffff;
  border-radius: 10px;
  margin-bottom: 24px;

  .Dropline {
    margin-left: 76px;
    margin-right: 79px;
    line-height: 73px;
    font-size: 16px;
    color: #959595;
    cursor: default;
  }
  .Dropline1 {
    margin-left: 76px;
    margin-right: 79px;
    line-height: 73px;
    font-size: 16px;
    color: #2e86ff;
    cursor: default;
  }
  .Scoreline {
    line-height: 73px;
    font-size: 16px;
    color: #2e86ff;
    cursor: default;
  }
  .Scoreline1 {
    line-height: 73px;
    font-size: 16px;
    color: #959595;
    cursor: default;
  }
  .year_box {
    float: right;
    width: 333px;
    margin-right: 35px;
    .lowdrop {
      float: right;
      line-height: 73px;
      color: #959595;
    }
    .year {
      width: 150px;
      height: 40px;

      float: left;
      color: #555555;
      line-height: 73px;
    }
  }
}
.school_line {
  height: 96px;
  margin-bottom: 12px;
  background-color: #ffffff;
  border-radius: 10px;
  .line_one {
    height: 20px;
    padding-top: 25px;
    margin-left: 73px;
    overflow: hidden;
  }
  .school_logo {
    height: 20px;
    width: 20px;
    float: left;
    margin-right: 6px;
  }
  .school_name {
    float: left;
    line-height: 20px;
    font-size: 15px;
    color: #414141;
    margin-bottom: 9px;
    margin-right: 24px;
  }
  .school_city {
    line-height: 20px;
    font-size: 14px;
    color: #757575;
  }
  .low_box {
    span {
      color: #757575;
      font-size: 12px;

      margin-right: 9px;
    }
    margin-left: 100px;

    .lowscore {
      margin-top: 18px;
      font-size: 10px;
      color: #757575;
      display: inline-block;
      margin-right: 48px;
    }
    .lowrank {
      margin-top: 18px;
      font-size: 10px;
      color: #757575;
      display: inline-block;
    }
    .lowscore_1 {
      font-weight: 550;
    }
  }
}
.lookmore {
  display: inline-block;
  margin-top: 36px;
  margin-bottom: 118px;
  margin-left: 550px;
  font-size: 17px;
  color: #959595;
  cursor: pointer;
}

// .el-tabs1111 .el-tab-pane1111{
//     border-bottom-color:#ffffff!important;
//     border: none;
//     font-size: 40px;

// }
// .el-tabs1111 .el-tab-pane__label{
//     color: red ;
// }
</style>